<html>
<head>
  <meta charset="utf-8">
  <title>indoBlockly [Code]</title>
  <!--css indoblockly modifikasi ++-->
  <link rel="stylesheet" href="css-id.css" type="text/css" />
  <script type="text/javascript" src="BlobBuilder.min.js"></script>
  <script type="text/javascript" src="FileSaver.min.js"></script>
  <script>
/**
 * List of tab names.
 * @private
 */
var TABS_ = ['blocks', 'javascript', 'dart', 'python', 'xml'];

var selected = null;

/**
 * Switch the visible pane when a tab is clicked.
 * @param {string} id ID of tab clicked.
 */
function tabClick(id) {
  // If the XML tab was open, save and render the content.
  if (document.getElementById('tab_xml').className == 'tabon') {
    var xmlTextarea = document.getElementById('textarea_xml');
    var xmlText = xmlTextarea.value;
    var xmlDom = null;
    try {
      xmlDom = Blockly.Xml.textToDom(xmlText);
    } catch (e) {
      var q =
          window.confirm('Error parsing XML:\n' + e + '\n\nAbandon changes?');
      if (!q) {
        // Leave the user on the XML tab.
        return;
      }
    }
    if (xmlDom) {
      Blockly.mainWorkspace.clear();
      Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
    }
  }

  // Deselect all tabs and hide all panes.
  for (var x in TABS_) {
    document.getElementById('tab_' + TABS_[x]).className = 'taboff';
    document.getElementById('content_' + TABS_[x]).style.display = 'none';
  }

  // Select the active tab.
  selected = id.replace('tab_', '');
  document.getElementById(id).className = 'tabon';
  // Show the selected pane.
  var content = document.getElementById('content_' + selected);
  content.style.display = 'block';
  renderContent();
}

/**
 * Populate the currently selected pane with content generated from the blocks.
 */
function renderContent() {
  var content = document.getElementById('content_' + selected);
  // Initialize the pane.
  if (content.id == 'content_blocks') {
    // If the workspace was changed by the XML tab, Firefox will have performed
    // an incomplete rendering due to Blockly being invisible.  Rerender.
    Blockly.mainWorkspace.render();
  } else if (content.id == 'content_xml') {
    var xmlTextarea = document.getElementById('textarea_xml');
    var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    xmlTextarea.value = xmlText;
    xmlTextarea.focus();
  } else if (content.id == 'content_javascript') {
    content.innerHTML = Blockly.Generator.workspaceToCode('JavaScript');
  } else if (content.id == 'content_dart') {
    content.innerHTML = Blockly.Generator.workspaceToCode('Dart');
  } else if (content.id == 'content_python') {
    content.innerHTML = Blockly.Generator.workspaceToCode('Python');
  }
}

/**
 * Initialize Blockly.  Called on page load.
 * @param {!Blockly} blockly Instance of Blockly from iframe.
 */
function init(blockly) {
  //window.onbeforeunload = function() {
  //  return 'Leaving this page will result in the loss of your work.';
  //};

  window.Blockly = blockly;

  // Make the 'Blocks' tab line up with the toolbox.
  if (Blockly.Toolbox) {
    Blockly.bindEvent_(window, 'resize', null, function() {
      document.getElementById('tab_blocks').style.minWidth =
          (Blockly.Toolbox.width - 38) + 'px';
          // Account for the 19 pixel margin and on each side.
      });
    window.setTimeout(function() {
        Blockly.fireUiEvent(document, window, 'resize');
      }, 1);
  }
  
  // Restore/backup current works.
  restore_blocks();
  Blockly.bindEvent_(window, 'unload', null, backup_blocks);

  // Init load event.
  var loadInput = document.getElementById('load');
  loadInput.addEventListener('change', load, false);
  document.getElementById('fakeload').onclick = function() {
    loadInput.click();
  };
}

/**
 * Execute the user's code.
 * Just a quick and dirty eval.  No checks for infinite loops, etc.
 */
function runJS() {
  var code = Blockly.Generator.workspaceToCode('JavaScript');
  try {
    eval(code);
  } catch (e) {
    alert('Program error:\n' + e);
  }
}

/**
 * Backup code blocks to localStorage.
 */
function backup_blocks() {
  if ('localStorage' in window) {
    var xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    window.localStorage.setItem('blocks', Blockly.Xml.domToText(xml));
  }
}

/**
 * Restore code blocks from localStorage.
 */
function restore_blocks() {
  if ('localStorage' in window && window.localStorage.blocks) {
    var xml = Blockly.Xml.textToDom(window.localStorage.blocks);
    Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml);
  }
}

/**
 * Save blocks to local file.
 */
function save() {
  var xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
  var data = Blockly.Xml.domToText(xml);

  // Store data in blob.
  var builder = new BlobBuilder();
  builder.append(data);
  saveAs(builder.getBlob('text/plain;charset=utf-8'), 'block.xml');
};

/**
 * Load blocks from local file.
 */
function load() {
  var files = event.target.files;
  // Only allow uploading one file.
  if (files.length != 1) {
    return;
  }

  // FileReader
  var reader = new FileReader();
  reader.onloadend = function(event) {
    var target = event.target;
    // 2 == FileReader.DONE
    if (target.readyState == 2) {
      try {
        var xml = Blockly.Xml.textToDom(target.result);
      } catch (e) {
        alert('Error parsing XML:\n' + e);
        return;
      }
      var count = Blockly.mainWorkspace.getAllBlocks().length;
      if (count && confirm('Replace existing blocks?\n"Cancel" will merge.')) { 
        Blockly.mainWorkspace.clear();
      }
      Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml);
    }
    // Reset value of input after loading because Chrome will not fire
    // a 'change' event if the same file is loaded again.
    document.getElementById('load').value = '';
  };
  reader.readAsText(files[0]);
};
  
/**
 * Discard all blocks from the workspace.
 */
function discard() {
  var count = Blockly.mainWorkspace.getAllBlocks().length;
  if (count < 2 || window.confirm('Hapus semua ' + count + ' blocks?')) {
    Blockly.mainWorkspace.clear();
    renderContent();
  }
}
  </script>
<!--  css asli bawaan blockly tak tutup dganti dengan css-id.css
<style>
body {
      background-color: white;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
    td {
      vertical-align: top;
    }

    /* Tabs */
    #tabRow>td {
      border: 1px solid #ccc;
    }
    td.tabon {
      border-bottom-color: #ddd !important;
      background-color: #ddd;
      padding: 5px 19px;
    }
    td.taboff {
      cursor: pointer;
      padding: 5px 19px;
    }
    td.taboff:hover {
      background-color: #eee;
    }
    td.tabmin {
      border-top-style: none !important;
      border-left-style: none !important;
      border-right-style: none !important;
    }
    td.tabmax {
      border-top-style: none !important;
      border-left-style: none !important;
      border-right-style: none !important;
      width: 99%;
      text-align: right;
    }

    table {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      border: none;
    }
    td {
      padding: 0;
    }
    pre,
    #content_xml {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      border: 1px solid #ccc;
      border-top-style: none;
      overflow: hidden;
      display: none;
    }
    #textarea_xml {
      width: 100%;
      height: 100%;
      border: none;
      resize: none;
    }
    iframe {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      border-top-style: none;
    }
    button {
      padding: 1px 1em;
      font-size: 90%;
      border-radius: 4px;
      border: 1px solid #ddd;
      background-color: #eee;
      color: black;
    }
    button.launch {
      border: 1px solid #d43;
      background-color: #d43;
      color: white;
    }
    button:active {
      border: 1px solid blue !important;
    }
    button:hover {
      box-shadow: 2px 2px 5px #888;
    }
  </style> -->
</head>
<body class="batik-bg">
  <table height="100%" width="100%">
    <tr>
      <td>
        <h1><a href="http://blockly.developers.or.id"><button>Home</button></a></h1>
      </td>
    </tr>
<tr>
<td>
			<!---ini bawah untuk translite jika di pencet,maka akan dkirim dg $_get dan nilai.nya 'id'-->
			<a href="index.php"><img src="indo.gif" height="20" width="50" title="Indonesia"/></a>
			<a href="index.php?hal=en"><img src="eng.gif" height="20" width="50" title="Inggris"/></a>
</td>
<tr>	
    <tr>
      <td>
        <table>
          <tr id="tabRow" height="1em">
            <td id="tab_blocks" class="tabon" onclick="tabClick(this.id)">indoBlockly</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_javascript" class="taboff" onclick="tabClick(this.id)">JavaScript</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_dart" class="taboff" onclick="tabClick(this.id)">Dart</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_python" class="taboff" onclick="tabClick(this.id)">Python</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_xml" class="taboff" onclick="tabClick(this.id)">XML</td>
            <td class="tabmax">
<?php
error_reporting (0); //mematikan pesan error karena butuh $_GET
//ini ikut translite,,tp masi manual jg soalnya dluar dari frame jadi tak buat seperti ini aja
//konsepnya sama translit seleksi jika dklik bendera,dan dkirim nilai ini bawah
if ($_GET['hal'] == 'en') {
?>		<!--ini dikirim dengan 'en' untuk english-->			
              <button onclick="discard()">Discard</button>
              <button onclick="save()">Save XML</button>
              <button id="fakeload">Load XML</button>
              <input type="file" id="load" style="display: none;"/>
              <button class="launch" onclick="runJS()">Run Program</button>
<?
}
else {?><!--default dengan indonesia-->		  
              <button onclick="discard()">Buang Semua</button>
              <button onclick="save()">Menyimpan XML</button>
              <button id="fakeload">Memuat XML</button>
              <input type="file" id="load" style="display: none;"/>
              <button class="launch" onclick="runJS()">Jalankan Program</button>
<?}?>				  
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="99%">
	  
<?php
// aku pake $_get ,jika kondisi nya dikasi nilai (*diatas button) hal == 'id' maka ini bawah
error_reporting (0);
if ($_GET['hal'] == 'en') {
?>		<!--ini dikirim dengan 'en' untuk english-->
        <iframe id="content_blocks" src="frame.php"></iframe>
<?
}
else {?><!--default dengan indonesia-->		  
        <iframe id="content_blocks" src="frame-id.php"></iframe>
<?}?>		
		
        <pre id="content_javascript" class="bg-source"></pre>
        <pre id="content_dart" class="bg-source"></pre>
        <pre id="content_python" class="bg-source"></pre>
        <div id="content_xml">
          <textarea id="textarea_xml"></textarea>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>
